<?php

/* @var $this \yii\web\View */
?>
<script type="text/x-template" id="search-form-template">
    <v-container v-if="myfilter">
        <v-row>
            <v-col cols="6">
                <template v-if="!isDialog">
                    <template v-for="(element,index) in myfilter">
                        <v-text-field
                                v-if="myfilterTypes[index] == 'string' "
                                v-model="element[getField(element)]"
                                :label="myfilterLabels[index]"
                        ></v-text-field>
                        <div class="d-flex align-center" v-if="myfilterTypes[index] == 'date'">
                            <div class="text-body-1 mx-2">
                                {{ myfilterLabels[index] }}:
                            </div>
                            <v-menu
                                    offset-y
                                    :close-on-content-click="false"
                            >
                                <template v-slot:activator="{ on, attrs }">
                                    <v-chip v-bind="attrs" v-on="on">{{ element.gt }}</v-chip>
                                </template>
                                <v-date-picker
                                        v-model="element.gt"
                                        min="2018-06-11"
                                        max="<?= date('Y-m-d', strtotime('+30days')) ?>"
                                ></v-date-picker>
                            </v-menu>
                            <div class="text-body-1 mx-2">
                                到
                            </div>
                            <v-menu
                                    offset-y
                                    :close-on-content-click="false"
                            >
                                <template v-slot:activator="{ on, attrs }">
                                    <v-chip v-bind="attrs" v-on="on">{{ element.lt }}</v-chip>
                                </template>
                                <v-date-picker
                                        v-model="element.lt"
                                        min="2018-06-11"
                                        max="<?= date('Y-m-d', strtotime('+30days')) ?>"
                                ></v-date-picker>
                            </v-menu>
                        </div>
                    </template>
                </template>
                <v-chip-group v-else>
                    <div v-for="element in elements">
                        <v-chip v-if="(element.type=='text' || element.type=='date') && element.value != null"
                                @click:close="element.value = null;search()" color="secondary" outlined close>
                            <span>{{ element.value }}</span>
                        </v-chip>
                        <v-chip v-if="element.type=='select' && element.value != null"
                                @click:close="element.value = null;search()" color="secondary" outlined close>
                            <span v-html="element.value.label"></span>
                        </v-chip>
                    </div>
                </v-chip-group>
            </v-col>
            <v-col cols="6">
                <div class="d-flex justify-end">
                    <v-btn text color="white" @click="onSearch">
                        查询
                    </v-btn>
                    <v-btn text color="white" @click="reset">
                        清除
                    </v-btn>
                </div>
            </v-col>
        </v-row>
        <v-dialog v-if="isDialog" v-model="searchOpen" fullscreen>
            <v-card>
                <v-toolbar
                        dark
                        color="primary"
                >
                    <v-btn
                            icon
                            @click="searchOpen = false"
                    >
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                    <v-toolbar-title>筛选条件</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-toolbar-items>
                        <v-btn
                                text
                                @click="search"
                        >
                            查找
                        </v-btn>
                    </v-toolbar-items>
                </v-toolbar>
                <v-container class="mt-3">
                    <div v-for="(element,index) in myfilter">
                        <v-text-field
                                v-if="myfilterTypes[index] == 'string' "
                                v-model="element[getField(element)]"
                                :label="myfilterLabels[index]"
                        ></v-text-field>
                        <div class="d-flex align-center" v-if="myfilterTypes[index] == 'date' ">
                            <div class="text-body-1 mx-2">
                                {{ myfilterLabels[index] }}:
                            </div>
                            <v-menu
                                    offset-y
                                    :close-on-content-click="false"
                            >
                                <template v-slot:activator="{ on, attrs }">
                                    <v-chip v-bind="attrs" v-on="on">{{ element.lt }}</v-chip>
                                </template>
                                <v-date-picker
                                        v-model="element.lt"
                                        min="2018-06-11"
                                        max="<?= date('Y-m-d', strtotime('+30days')) ?>"
                                ></v-date-picker>
                            </v-menu>
                            <div class="text-body-1 mx-2">
                                到
                            </div>
                            <v-menu
                                    offset-y
                                    :close-on-content-click="false"
                            >
                                <template v-slot:activator="{ on, attrs }">
                                    <v-chip v-bind="attrs" v-on="on">{{ element.gt }}</v-chip>
                                </template>
                                <v-date-picker
                                        v-model="element.gt"
                                        min="2018-06-11"
                                        max="<?= date('Y-m-d', strtotime('+30days')) ?>"
                                ></v-date-picker>
                            </v-menu>
                        </div>
                    </div>
                </v-container>

            </v-card>
        </v-dialog>
    </v-container>
</script>
<script>
    Vue.component('search-form', {
        props: {
            filterData: Object
        },
        data: function () {
            let filterData = this.filterData;

            return {
                searchOpen: false,
                myfilter: filterData.filter,
                myfilterLabels: filterData.filterLabels,
                myfilterTypes:filterData.filterTypes,
                elements: {}
            };
        },
        computed: {
            theme: function () {
                let theme = this.$vuetify.theme;
                return theme.isDark ? theme.themes.dark : theme.themes.light;
            },
            temporary: function () {
                switch (this.$vuetify.breakpoint.name) {
                    case 'xs':
                        return true
                    case 'sm':
                        return true
                    case 'md':
                        return false
                    case 'lg':
                        return false
                    case 'xl':
                        return false
                }
            },
            isDialog: function () {
                return Object.keys(this.myfilter).length > 1;
            }
        },
        methods: {
            onSearch() {
                if (Object.keys(this.myfilter).length === 1) {
                    this.search()
                } else if (Object.keys(this.myfilter).length > 1) {
                    this.searchOpen = true;
                }
            },
            setField(column, value, toSearch) {
                for (let i in this.elements) {
                    let element = this.elements[i];
                    if (element.field === column) {
                        element.value = value;
                        if (toSearch) {
                            this.$nextTick(function () {
                                this.search();
                            });
                        }
                        break;
                    }
                }
            },
            search() {
                this.searchOpen = false;
                this.$emit('search', this.myfilter);
            },
            reset() {
                window.location.href = window.location.href
            },
            getField(element) {
                return Object.keys(element)[0]
            }
        },
        template: '#search-form-template'
    })
</script>